<template>
	<div class="order">
		<Header></Header>
		<ul class="orderList">
			<li v-for="item in orderList" :key="item._id + Math.random()">
				<van-checkbox v-model="item.checked"></van-checkbox>
				<div class="info">
					<div>
						<p class="name">{{ item.receiver }}</p>
						<div class="detailAddress">{{ item.regions + item.address }}</div>
					</div>
					<div class="do">
						<van-button
							type="primary"
							@click="goOrderDetail(item._id)"
							size="mini"
							>订单详情</van-button
						>
						<van-button
							v-if="item.checked"
							type="danger"
							@click="delOrder(item._id)"
							size="mini"
							>删除订单</van-button
						>
					</div>
				</div>
			</li>
		</ul>
		<div class="footer">
			全选：<van-checkbox v-model="checked"></van-checkbox>
			<van-button
				@click="alldel()"
				type="danger"
				size="mini"
				v-if="select.length > 1"
				>全部删除</van-button
			>
		</div>
	</div>
</template>

<script>
import Header from "@/components/header";
import { reqOrderList, reqDelOrder, reqAddDel } from "@/api/order";
import { Notify } from "vant";
export default {
	data() {
		return {
			orderList: [],
		};
	},
	computed: {
		// 判断选中的订单
		select() {
			// 定义一个空数组
			const ids = [];
			this.orderList.filter((item) => {
				if (item.checked) {
					ids.push(item._id);
				}
			});
			return ids;
		},
		// 判断全选全部选
		checked: {
			set(flag) {
				this.orderList.map((item) => this.$set(item, "checked", flag));
			},
			get() {
				if (this.orderList.length == 0) {
					return false;
				} else {
					return (
						this.orderList.length ===
						this.orderList.filter((item) => item.checked).length
					);
				}
			},
		},
	},
	watch: {},

	methods: {
		// 获取订单详情页面
		async getOrderList() {
			const res = await reqOrderList();
			console.log(res);
			this.orderList = res.orders;
		},
		// 点击跳转订单详情
		goOrderDetail(id) {
			// 跳转详情
			this.$router.push("/orderDetail/" + id);
		},
		// 删除订单
		async delOrder(id) {
			const res = await reqDelOrder(id);
			console.log(res);
			Notify({
				message: "订单删除成功",
				duration: 1000,
			});
			// 删除的时候并且把数组的id的那个使用splice删除
			this.orderList.forEach((item, index) => {
				if (item._id == id) {
					this.orderList.splice(index, 1);
				}
			});
		},

		// 删除多个订单
		async alldel() {
			const ids = this.select;
			console.log(ids);
			const res = await reqAddDel({ ids });
			console.log(res);
			if (res.ok == 1) {
				Notify({
					message: "订单批量删除成功",
					duration: 1000,
				});
				// 成功调用订单列表接口刷新
				this.getOrderList();
			}
		},
	},
	created() {
		// 在这里调用获取订单列表的方法
		this.getOrderList();
	},
	mounted() {},
	components: {
		Header,
	},
};
</script>
<style scoped>
.orderList li {
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.info {
	width: 100%;
	display: flex;
	/* margin-left: 20px; */
	/* justify-content: center; */
	align-items: center;
	height: 50px;
	line-height: 25px;
}
.info .van-button {
	margin-left: 10px;
}
.van-checkbox {
	display: inline-block;
	vertical-align: middle;
	width: 30px;
	margin-left: 5px;
}
.detailAddress {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>
